<template>

  <div class="app-container">

    <el-row :gutter="20">
      <el-col :span="14">
        <div class="grid-content bg-purple">
          <SignalingServerConfig></SignalingServerConfig>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="grid-content bg-purple">
          <RelayServerConfig></RelayServerConfig>
        </div>
      </el-col>
    </el-row>



  </div>
</template>

<script>
  import SignalingServerConfig from './components/SignalingServerConfig.vue'
  import RelayServerConfig from './components/RelayServerConfig.vue'
  import GPUServerConfig from './components/GPUServerConfig.vue'


  import {
    hasPermission
  } from '@/utils/permission'
  import {
    findConfigList
  } from '@/api/cloud/config'
  import {
    isOk
  } from '@/utils/request'
  export default {
    name:'Project',
    components: {
      RelayServerConfig,
      SignalingServerConfig,
      GPUServerConfig
    },
    data() {
      return {
        loading:false,
        queryForm: {
          keywords: undefined,
          status: '',
          orgId: ''
        },
        page: {
          cur: 1,
          limit: 50,
          total: 0
        },
        tableData: [],
        editDialog: {
          visible: false,
          type: '0',
          data: {}
        },
        roleUserDialog:{
          visible: false,
          data: {}
        },
        roleDataDialog:{
          visible: false,
          data: {}
        },
        roleOperaDialog:{
          visible: false,
          data: {}
        },
      }
    },
    created() {
      //this.load();
    },
    methods: {
      indexMethod(index) {
        return index +1;
      },
      onQuerySubmit(event) {
        this.load()
      },
      onReset(event) {
        this.queryForm.keywords=undefined;
        this.queryForm.status='';
        this.load()
      },
      load(){
        this.loading=true
        findConfigList({
          cur: this.page.cur,
          limit: this.page.limit,
          keywords: this.queryForm.keywords,
        }).then(rsp => {
          if(isOk(rsp)){
            const _data = rsp.result
            this.page.total = _data.totalPages
            this.tableData = _data.content
            this.loading = false
          }
        }).catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false
        })
      },
      close: function(e) {
        this.editDialog.visible = false
        this.editDialog.data = {}
        this.load()
      },
      handleCurrentChange(cur) {
        this.page.cur = cur
        this.load()
      },
      handleAdd: function(e) {
        this.editDialog.visible = true
        this.editDialog.type = '0'
      },
      handleEdit: function(data) {
        this.editDialog.visible = true
        this.editDialog.type = '1'
        this.editDialog.data = data
      }
    }
  }
</script>
